<template>  
  <div v-if="showModal" class="modal" @click.stop="closeModal">  
    <div class="modal-content" @click.stop>
		
		<div class="quit_box" @click.stop="closeModal">
			<img class="quit_box_img" :src="require(`@/assets/icons/关闭.png`)"></img>
		</div>
		
      <!-- 表单内容 -->  


		  
		  <div class="buy_card">
			  <div class="buy_card_title">配送方式</div>
			  <div class="buy_card_context">
				  <div :class="{ 'select': trade_way_index === 0 }" @click="select('trade_way',0)" v-if="this.shopData.type=='ALL' || this.shopData.type=='OnlyYourself'">
					  自送上门
				  </div>
				  <div :class="{ 'select': trade_way_index === 1 }" @click="select('trade_way',1)" v-if="this.shopData.type=='ALL' || this.shopData.type=='OnlySelf'">
						企业上门
				  </div>
			  </div>
		  </div>
	
		<div class="buy_card">
					  <div class="buy_card_title">秸秆类型 <div style="font-size:12px;display:inline">回收价格 {{this.shopData.buys[trade_type_index].price}}/kg</div> </div>
					  <div class="buy_card_context">
						  <div v-for="(item,index) in this.shopData.buys" :class="{ 'select': trade_type_index === index }" @click="select('trade_type',index)">{{item.name}}</div>
					  </div>
		</div>
		
		<div class="buy_card" v-if="Has_Select_type">
					  <div class="buy_card_title">回收重量</div>
					  <div class="buy_card_context">
						  <div :class="{ 'select': trade_weight_index === index }" @click="select('trade_weight',index)" v-for="(item,index) in this.shopData.buys[trade_type_index].amountqj">{{item}}kg</div>
					  </div>
		</div>
	
		<div class="buy_card">
					  <div class="buy_card_title">回收站点选择</div>
					  <div class="buy_card_context">
						  <div v-for="(item,index) in this.shopData.stations" :class="{ 'select': trade_station_index === index }" @click="select('trade_station',index)">{{item.name}}</div>
					  </div>
					  {{this.shopData.stations[this.trade_station_index].address}}
		</div>
	
		
		
		<div class="placeblock">
			placeblock
		</div>
		  
	  <button class="submit" @click="submit">立刻回收，可获得 ¥{{getSum}} </button>
	  
	  
	  
    </div>  
  </div>  
</template>  
  
<script>  
export default {
	name: 'BuyModal',
	props: {  
	    shopData: {  
	      type: Object  
	    }  
	  },
  data() {  
    return {

	  Has_Select_type: true,
	  Has_Select_type_index:0,
      showModal: false,
	  trade_way_index: 0,
	  trade_type_index: 0,
	  trade_weight_index:0,
	  trade_station_index:0,
	  showLocation:"",
	  
    };  
  },  
  mounted() {
  	this.init();
  },
  computed:{
	  getSum(){
		  if(this.trade_type_index != null && this.trade_weight_index!=null && this.shopData!=null){
			   return this.shopData.buys[this.trade_type_index].price *  this.shopData.buys[this.trade_type_index].amountqj[this.trade_weight_index] 
		  }
	  },
	
  },
  methods: {
	init(){
		
		if(this.shopData.type=='ALL' || this.shopData.type=='OnlyYourself'){
			this.trade_way_index=0;
		}else{
			this.trade_way_index=1;
		}
		
		

	},
    openModal() {  
      this.showModal = true;  
    },  
    closeModal() {  
      this.showModal = false;  
    },  
	select(type,index){
		if(type=='trade_way'){
			this.trade_way_index=index;
		}else if(type=='trade_type'){
			this.trade_type_index=index;
			this.Has_Select_type = true;
			this.Has_Select_type_index=index;
		}else if(type=='trade_weight'){
			this.trade_weight_index=index;
		}else if(type=='trade_station'){
			this.trade_station_index =index;
		}
	},
    submit() {
		
		
		this.$message({
		    title:'确认回收',
		    content:'你确定要提交回收订单吗？',
		    confirmText:'确定',
		    cancelText:'取消',
		    showCancel:true,
		    callback:(action)=>{
		        if(action === 'confirm'){
					
					
					
					this.axios.post(`${this.IP}/create_order`, {
							token: this.getStorage('token'),
							shopID: this.shopData.uid,
							tradewayID: this.trade_way_index,
							typeID: this.trade_type_index,
							amount: parseInt(this.shopData.buys[this.trade_type_index].amountqj[this.trade_weight_index]),
							stationID: this.trade_station_index
					}).then(res => {
						this.$toast.showMessage(res.data);
						// this.$router.push('/success');
						this.closeModal();  
					}).catch(error => {
						// 处理错误  
						console.error('请求出错：', error);
					});;
					
					

					
		        }else{
		            //
		        }
		    }
		});
		
      // 处理表单提交逻辑  
      // 可以使用this.$emit来通知父组件表单已提交  

    },  
  },  
};  
</script>  
  
<style scoped>  
.modal {  
  position: fixed;
  width: 100vw;
  height: 100vh;
  bottom:0vh;
  background-color: rgba(0,0,0,0.5); /* 半透明背景 */  
  z-index: 11; /* 确保弹窗在其他内容之上 */
  overflow-y: auto;
  -webkit-overflow-scrolling:touch;
}  
.modal-content {  
  background-color: #efefef;  
  margin-top: 12vh;
  width: 100vw;
  border-radius: 8px; 
  height: auto;
  min-height: 100vh;
  transition: transform 0.3s ease; /* 设置过渡动画 */  ;
  overflow: hidden;
}
.quit_box{
	display:flex;
	flex-direction: row;
	justify-content: flex-end;
}
.quit_box_img{
	padding: 1vw;
	width: 48px;
	height: 48px;
}

.buy_card{
	background-color: white;
	padding: 2vw;
	border-radius: 20px;
	width: 94vw;
	margin: 0 auto;
	margin-top: 4vh;
}



.buy_card_title{
	font-size:42px;
	padding: 1vw;
	border-bottom: 1px solid #ebebeb;
}
.buy_card_context{
	display: flex;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: wrap;
	align-items: center;
}
.buy_card_context div{
	margin: 3vw;
	border: 1px solid #ebebeb;
	background-color: #efefef;
	border-radius: 10px;
	padding: 10px;
}


.buy_card_context div.select{
	border: 1px solid #FFAAAA;
	background-color: rgba(255,122,122,0.2);
}


.submit{
	position: fixed;
	bottom: 0vh;
	width: 96vw;
	left: 2vw;
	padding: 3vw;
	background: linear-gradient(to right, #ff6142, #ff1943);
	border-radius: 20px;
	border: none;
	color: white;
	font-size:28px;
	font-weight: bold;
}
</style>